<template>
	<view v-if="info" class="activateMembership">
		<view class="header">
			<view class="left">
				<image :src="info.avatar" mode=""></image>
				<view class="info">
					<view class="top">
						{{info.realName}}
						<view :class="[GetcardTypeCodeColor(info.status)]" class="status">
							{{info.statusName}}
						</view>
					</view>
					<view @click="copyTextToClipboard(info.code)" class="bot">
						ID：{{info.code}}
						<image class="copy" src="https://oss.6mate.cn/mini/icon_copy.png" mode="">
						</image>
					</view>
				</view>
			</view>
			<view class="right">
				<!-- <image src="
https://oss.6mate.cn/mini/hongniang.png" mode=""></image> -->
				{{info.miniUserTypeName}}
			</view>
		</view>
		<view class="infoPrev">
			<view class="line">
				<view class="left">
					地区：
				</view>
				<view class="right">
					{{info.province}}{{info.city}}
				</view>
			</view>
			<view class="line">
				<view class="left">
					手机号：
				</view>
				<view class="right" @click="copyTextToClipboard(info.mobile)">
					{{info.mobile}}
					<!-- <image class="copy" src="
https://oss.6mate.cn/mini/icon_copy.png" mode="">
					</image> -->
				</view>
			</view>
			<view class="line">
				<view class="left">
					微信号：
				</view>
				<view class="right" @click="copyTextToClipboard(info.weiXin)">
					{{info.weiXin}}
					<!-- <image class="copy" src="
https://oss.6mate.cn/mini/icon_copy.png" mode="">
					</image> -->
				</view>
			</view>
			<view class="line" style="align-items: flex-start;">
				<view class="left">
					地址：
				</view>
				<view class="right">
					{{info.address}}
				</view>
			</view>
			<view class="line">
				<view class="left">
					注册时间：
				</view>
				<view class="right">
					{{info.registerTime}}
				</view>
			</view>
			<view v-if="info.lastLoginTime" class="line">
				<view class="left">
					最后登录时间：
				</view>
				<view class="right">
					{{info.lastLoginTime}}
				</view>
			</view>
			<!-- <view v-if="info.description" class="line">
				<view class="left">
					备注：
				</view>
				<view class="right">
					{{info.description}}
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				info: {
					nickName: "111",
					memberNo: "112344445",
					authTypeName: "222222",
					description: 222222
				},
			}
		},
		onLoad(e) {
			this.getDetail(e.id) //获取会员列表
		},
		methods: {
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000,
						});
					},
					fail: function() {

						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			// 状态：ENABLE正常，EXPIRE已过期，DISABLE已停用
			GetcardTypeCodeColor(item) {
				if (item == 'ENABLE') {
					return 'base'
				} else if (item == 'EXPIRE') {
					return 'ending'
				} else {
					return 'over'
				}
			},
			getDetail(id) {
				this.$u.api
					.miniUserDetail({
						id
					})
					.then((res) => {
						console.log(res, 77777);
						this.info = res.data
					});
			}

		}
	}
</script>
<style>
	page {
		background: #F6F6F6;
		/* padding: 24rpx 40rpx; */
	}
</style>

<style scoped lang="scss">
	.activateMembership {
		// width: 100%;
		margin: 24rpx 40rpx;
		padding: 28rpx 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;

		.infoPrev {
			border-top: 2rpx solid #F5F5F5;
			padding-top: 20rpx;

			.line {
				margin-bottom: 22rpx;
				display: flex;
				align-items: center;

				.left {
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: rgba(15, 20, 23, 0.7);
				}

				.right {
					flex: 1;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #0F1417;
					line-height: 33rpx;

					.copy {
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}

					.status {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 500;
						font-size: 28rpx;
						color: #6F7274;
						line-height: 33rpx;

						&.doing {
							color: #FFA340 !important;
						}

						&.ok {
							color: #1BAB6B !important;
						}
					}
				}
			}
		}


		.header {
			padding-bottom: 24rpx;
			// padding-right: 24rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.right {
				display: flex;
				align-items: center;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #FA4A53;
				line-height: 40rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}

			.left {
				display: flex;
				align-items: center;

				image {
					width: 93rpx;
					height: 93rpx;
					margin-right: 26rpx;
					border-radius: 50%;
				}

				.info {
					flex: 1;

					.top {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #0F1417;
						line-height: 40rpx;
						margin-bottom: 8rpx;
						display: flex;
						align-items: center;

						.status {
							margin-left: 8rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 20rpx;
							margin-left: 8rpx;
							line-height: 20rpx;
							padding: 4rpx 10rpx;
							border-radius: 14rpx 14rpx 14rpx 14rpx;
							color: #fff;

							&.base {
								color: #FFFFFF !important;
								background: #1BAB6B !important;
							}

							&.over {
								// color: #FFE1CF !important;
								background: #6F7274 !important;
							}

							&.ending {
								color: #FFE1CF !important;
								background: #FA4A53 !important;
							}


						}
					}

					.bot {
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(15, 20, 23, 0.6);
						.copy {
							width: 20rpx;
							height: 20rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

		}
	}
</style>
